<template>
    <div class="canvas1" ref="canvasRef"></div>
</template>

<script setup>
    import * as echarts from 'echarts'
    import {ref, onMounted, onUnmounted} from 'vue'
    const canvasRef = ref(null)
    const myEchart = ref(null)
    onMounted(() => {
        myEchart.value =  echarts.init(canvasRef.value)
        let option = {
            tooltip: {},
            grid: {
                show: true,
                // backgroundColor: '#666',
                // left: '50%',
            },
            xAxis: {
                type: 'value',  // value | category | time | log
                splitLine: {
                    show: true,
                    lineStyle: {
                        type: 'dashed'
                    },
                },
                // data: [{
                //     value: '一',
                //     textStyle: {
                //         color: 'red',
                //         fontWeight: 800
                //     }
                // }, '二', '三', '四'],
                nameRotate: 45,
                nameGap: 10,
                nameTruncate: {
                    maxWidth: 50,
                    ellipsis: '...',
                },
                nameTextStyle: {
                    padding: [-30, 0, 0, -10],
                    verticalAlign: 'bottom'

                },
                name: '数量最高对',
                nameLocation: 'end',
                // minInterval: 20 *  24 * 3600 * 1000, // 针对于时间轴
                // maxInterval: 20 * 24 * 3600 * 1000, // 针对于时间轴
                axisLabel: {
                    interval: 0,  //针对于类目轴
                    rotate: 40,
                    // backgroundColor: 'pink',
                    color: '#666',
                    padding: [0, 10],
                    // formatter: '{yyyy}-{MM}-{dd}'
                    // formatter: function(value) {
                    //     let date = new Date(value)
                    //     return date.toDateString()
                    // }
                },
                axisLine: {
                    lineStyle: {
                        width: 2,
                        color: 'green'
                    },
                    symbol: 'arrow'
                },
                // 主刻度线
                axisTick: {
                    inside: false,
                    // length: 30,
                    lineStyle: {
                        width: 5,
                        color: 'red'
                    },
                },
                // 副刻度线
                minorTick: {
                    show: false,
                    lineStyle: {
                        color: 'yellow',
                        width:2,
                        cap: 'butt'
                    }
                }
            },
            yAxis: {
                // interval: 5,
                // name: '个'
            },
            series: [
                // {
                //     name: 'mark',
                //     type: 'line',
                //     data: [20, 40, 30, 10]
                // },
                // x坐标轴为time类型的时候数据格式
                {
                    name: 'mary',
                    type: 'line',
                    data: [-20, -40, -30, -10, 20, 40, 30, 10]
                    // data: [['2024-01-03', 20], ['2024-02-03', 40], ['2024-03-03', 50],['2024-04-03', 30]],
                }
            ]    
        }
        myEchart.value.setOption(option)
    })
    onUnmounted(() => {
        myEchart.value.dispose(canvasRef.value)
    })
</script>
 
<style lang='less' scoped>
    .canvas1{
        width: 600px;
        height: 400px;
        position: relative;
    }
</style>